@import models.Tables.GeographicalDataRow

@(row: GeographicalDataRow, id: Int)
@home.main("Info") {

    <style>
            th {
                width: 25%;
            }
    </style>

    <div class="row">
        <div class="form-group col-sm-12">
            <h2 class="page-heading"
            style="text-align: left;
                border-bottom: 5px solid #e9f3f4">Information</h2>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
            word-wrap: break-word">
            <tbody>
                <tr>
                    <th>FOC分类系统，新增爬树蕨科、翼囊蕨科</th>
                    <td>@row.id</td>
                </tr>
                <tr>
                    <th>科名（中文）</th>
                    <td>@row.familyCh</td>
                </tr>
                <tr>
                    <th>科名（拉丁）</th>
                    <td>@row.familyEn</td>
                </tr>
                <tr>
                    <th>属名（中文）</th>
                    <td>@row.genusCh</td>
                </tr>
                <tr>
                    <th>属名（拉丁）</th>
                    <td>@row.genusEn</td>
                </tr>
                <tr>
                    <th>中文名</th>
                    <td>@row.chinesename</td>
                </tr>
                <tr>
                    <th>学名（全称）</th>
                    <td>@row.scientificName</td>
                </tr>
                <tr>
                    <th>学名（简称）</th>
                    <td>@row.scientificAbbr</td>
                </tr>
                <tr>
                    <th>引文</th>
                    <td>@row.quote</td>
                </tr>
                <tr>
                    <th>分布</th>
                    <td>@row.location</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="container" style="height: 650px;border: 1px solid #DDDDDD;margin-top: -20px;border-top: none;"></div>

    <script src="@routes.Assets.at("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("Highmaps-6.1.0/exporting.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("Highmaps-6.1.0/data.js")" type="text/javascript"></script>
    <script>

            $(function () {


                var map = null,
                        unDrilldown = ['taiwan', 'xianggang', 'aomen'];
                // 获取中国地图数据并初始化图表


                $.ajax({
                    url: "/fern/map/getLocation?id=" + @id,
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        $.getJSON('/fern/map/getMapData', function (mapdata) {

                            // 随机数据
                            map = new Highcharts.Map('container', {
                                title: {
                                    text: '中国产蕨类植物的地理分布信息'
                                },
                                mapNavigation: {
                                    enabled: true,
                                    buttonOptions: {
                                        verticalAlign: 'bottom'
                                    }
                                },
                                tooltip: {
                                    useHTML: true,
                                    headerFormat: '<table><tr><td> {point.name}</td></tr>',
                                    pointFormat: '<tr><td>全称</td><td> {point.properties.fullname}</td></tr>' +
                                    '<tr><td>物种数</td><td> {point.properties.species}</td></tr>' +
                                    '<tr><td>经纬度</td><td> {point.properties.longitude},{point.properties.latitude}</td></tr>',
                                    footerFormat: '</table>'
                                },
                                series: [{
                                    data: data,
                                    mapData: mapdata,
                                    joinBy: 'name',
                                    name: '中国地图',
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    states: {
                                        hover: {
                                            color: '#a4edba'
                                        },
                                        select: {
                                            color: 'orange',
                                            borderColor: 'black',
                                            dashStyle: 'shortdot'
                                        }
                                    },
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                }]
                            });

                        });
                    }
                });
            })



    </script>

}